<!-- 订单管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="">
        <el-date-picker v-model="data.startTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.stratTime')" style="width:100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker v-model="data.endTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.endTime')" style="width:100%"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-input v-model="data.name" size="medium" class="iup_width200" :placeholder="$t('lan.userName')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.sn" size="medium" class="iup_width200" :placeholder="$t('lan.orderNumber')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="data.status" size="medium" class="iup_width200" :placeholder="$t('lan.selectStatus')">
          <el-option v-for="item in orderStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">{{$t('lan.query')}}</el-button>
        <el-button type="info" size="medium" @click="reset">{{$t('lan.reset')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="orderList" v-loading="loading" :element-loading-text="$t('lan.dataLoading')" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>{{$t('lan.available')}}</div>
      </div>
      <el-table-column type="index" :label="$t('lan.num')" align="center" width="140"></el-table-column>
      <el-table-column prop="orderTime" :label="$t('lan.orderTime')" :formatter="common.formatTime" align="center" width="170"></el-table-column>
      <el-table-column prop="name" :label="$t('lan.userName')" align="center"></el-table-column>
      <el-table-column prop="email" :label="$t('lan.email')" align="center" width="170"></el-table-column>
      <el-table-column prop="mobile" :label="$t('lan.phone')" align="center" width="130"></el-table-column>
      <el-table-column prop="sn" :label="$t('lan.orderNumber')" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="amt" :label="$t('lan.amt')" align="center">
        <template slot-scope="scope">
          <span class="green">{{common.formatAmount(scope.row.amt,2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="statusName" :label="$t('lan.status')" align="center"></el-table-column>
      <el-table-column :label="$t('lan.operation')" align="center" fixed="right" min-width="80">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="queryOrder(scope.row)">{{$t('lan.see')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>
    <el-dialog :title="$t('lan.orderDetail')" :visible.sync="showModal" width="1100px" top="5vh">
      <div class="content">
        <el-row>
          <el-col :span="8">
            <div>{{$t('lan.name')}}：{{orderDetail.name}}</div>
          </el-col>
          <el-col :span="8">
            <div>{{$t('lan.phone')}}：{{orderDetail.mobile}}</div>
          </el-col>
          <el-col :span="8">
            <div>{{$t('lan.email')}}：{{orderDetail.email}}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="ellipsis" :title="orderDetail.address">{{$t('lan.Address')}}：{{orderDetail.address}}</div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='1'">
            <div>{{$t('lan.certificate')}}：{{orderDetail.cardType=='1'?$t('lan.card'):orderDetail.cardType=='2'?'出入境登记证':$t('lan.passport')}}</div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='1'">
            <div>{{$t('lan.number')}}：{{orderDetail.cardNo}}</div>
          </el-col>
          <el-col :span="8" v-if="orderDetail.customerType=='2'">
            <div>{{$t('lan.company')}}：{{orderDetail.companyName}}</div>
          </el-col>
          <el-col :span="8">
            <div>{{$t('lan.orderNumber')}}：<span>{{orderDetail.sn}}</span></div>
          </el-col>
          <el-col :span="8">
            <div>{{$t('lan.amt')}}：<span class="green">${{common.formatAmount(orderDetail.amt,2)}}</span></div>
          </el-col>
          <el-col :span="8">
            <div>{{$t('lan.sttaus')}}：<span :class="orderDetail.status=='1'?'red':'green'">{{orderDetail.statusName}}</span></div>
          </el-col>
        </el-row>
        <div class="product" v-for="i in orderDetail.orderItemBOList" :key="i.id">
          <el-row>
            <el-col :span="3">
              <img :src="i.picUrl" width="100" height="100" alt="">
            </el-col>
            <el-col :span="18">
              <div class="lineHeight32 productDetail">{{i.categoryName}}</div>
              <div class="lineHeight32 productDetail">{{$t('lan.doorColor')}}：<span class="colorValue" :style="{background:i.colorValue?i.colorValue:formatColor(i.deviceColor)}"></span> {{$t('lan.cabinetColor')}}：<span class="colorValue" :style="{background:i.cabinetColorValue?i.cabinetColorValue:formatColor(i.cabinetColor)}"></span>{{$t('lan.auxiliaryNum')}}：{{i.subCategoryTotalCount}} {{$t('lan.totalNumDoors')}}：{{i.doorTotalCount}}</div>
              <div class="lineHeight32 productDetail">{{$t('lan.system')}}：{{i.operationCode}} {{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</div>
            </el-col>
          </el-row>
        </div>

      </div>

    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showModal: false,//是否显示订单详情
      orderList: [],
      orderDetail: {},
      data: {
        pageSize: 10,
        currentPage: 1,
        name: "",
        sn: "",
        status: "",
        startTime: '',
        endTime: '',
      },
      total: 0,
      loading: false,
      getTime: "",
      orderStatus: this.enums.orderStatus,
      colorList: this.enums.colorList
    };
  },
  methods: {
    formatColor (id) {
      for (let i of this.colorList) {
        if (id === i.id) return i.value
      }
    },
    async queryOrder (row) {
      const url = `/order/get/${row.id}`
      const result = await this.request.httpRequest("get", url)
      if (result.code == 200) {
        this.orderDetail = result.data
        this.showModal = true
      }
    },
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getOrderList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getOrderList();
    },
    //查询关键字
    search () {
      this.data.currentPage = 1;
      this.getOrderList();
    },
    //重置列表
    reset () {
      this.data.pageSize = 10
      this.data.currentPage = 1
      this.data.name = ''
      this.data.sn = ''
      this.data.status = ''
      this.data.startTime = ''
      this.data.endTime = ''
      this.getOrderList();
    },
    //获取列表
    async getOrderList () {
      this.loading = true;
      let url = "/order/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.orderList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    }
  },
  mounted () {
    this.getOrderList();
    this.getTime = this.helper.debounce(this.getOrderList); //防抖
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
.content {
  padding: 20px 30px;
  font-size: 18px;
}
.content >>> .el-col {
  padding: 10px 0px;
}
.product {
  /* margin-bottom: 5px; */
}
.lineHeight32 {
  line-height: 32px;
}
.productDetail {
  font-size: 16px;
  color: #555;
}
.colorValue {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: sub;
  border: 1px solid #ccc;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>